<template>
  <el-dialog
    v-model="isShow"
    :title="handle.name + name"
    width="80%"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <el-form class="dialog-form" label-width="100px">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :lg="8">
          <el-form-item label="托运人：">
            <el-input v-model="form.publicName" placeholder="请输入托运联系人姓名" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8">
          <el-form-item label="手机号：">
            <el-input v-model="form.publicName" placeholder="请输入托运联系人手机号" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8">
          <el-form-item label="承接人：">
            <el-input v-model="form.publicName" placeholder="请输入承接人" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8">
          <el-form-item label="加入通讯录：">
            <el-switch v-model="form.isAddPhone" />
          </el-form-item>
        </el-col>
        <el-col :xs="24">
          <el-divider />
          <el-form-item label="运输方式：">
            <el-input v-model="form.publicName" placeholder="请输入托运联系人姓名" />
          </el-form-item>
        </el-col>
        <el-col :xs="24">
          发货方信息
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8">
          <el-form-item label="发货城市：">
            <el-input v-model="form.publicName" placeholder="请输入托运联系人姓名" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8">
          <el-form-item label="发货单位：">
            <el-input v-model="form.publicName" placeholder="请输入托运联系人姓名" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8">
          <el-form-item label="发货联系人：">
            <el-input v-model="form.publicName" placeholder="请输入托运联系人姓名" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8">
          <el-form-item label="详细地址：">
            <el-input v-model="form.publicName" placeholder="请输入托运联系人姓名" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8">
          <el-form-item label="发货时间：">
            <el-input v-model="form.publicName" placeholder="请输入托运联系人姓名" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8">
          <el-form-item label="联系方式：">
            <el-input v-model="form.publicName" placeholder="请输入托运联系人姓名" />
          </el-form-item>
        </el-col>
        <el-col :xs="24">
          <el-divider />
          发货方信息
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8">
          <el-form-item label="收货城市：">
            <el-input v-model="form.publicName" placeholder="请输入托运联系人姓名" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8">
          <el-form-item label="收货单位：">
            <el-input v-model="form.publicName" placeholder="请输入托运联系人姓名" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8">
          <el-form-item label="收货联系人：">
            <el-input v-model="form.publicName" placeholder="请输入托运联系人姓名" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8">
          <el-form-item label="详细地址：">
            <el-input v-model="form.publicName" placeholder="请输入托运联系人姓名" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8">
          <el-form-item label="收货时间：">
            <el-input v-model="form.publicName" placeholder="请输入托运联系人姓名" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8">
          <el-form-item label="联系方式：">
            <el-input v-model="form.publicName" placeholder="请输入托运联系人姓名" />
          </el-form-item>
        </el-col>
        <el-col :xs="24">
          <el-divider />
          <el-form-item label="计价方式">
            <el-radio-group v-model="form.status" placeholder="请选择">
              <el-radio v-for="(item,index) in optionData.statusType" :key="index" :label="item.id">{{item.name}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :xs="24" v-for="(item,index) in goods.list" :key="index">
          <el-divider content-position="left">货物{{index+1}}</el-divider>
          <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :lg="8">
            <el-form-item label="物品类型：">
              <el-input v-model="form.publicName" placeholder="请输入托运联系人姓名" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="8">
            <el-form-item label="货物名称：">
              <el-input v-model="form.publicName" placeholder="请输入托运联系人姓名" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="8">
            <el-form-item label="重量：">
              <el-input v-model="form.publicName" placeholder="Please input" class="input-with-select"              >
                <template #append>
                  <el-select v-model="select" placeholder="Select" style="width: 115px">
                    <el-option label="Restaurant" value="1" />
                    <el-option label="Order No." value="2" />
                    <el-option label="Tel" value="3" />
                  </el-select>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="8">
            <el-form-item label="体积：">
              <el-input v-model="form.publicName" placeholder="Please input" class="input-with-select"              >
                <template #append>
                  <el-select v-model="select" placeholder="Select" style="width: 115px">
                    <el-option label="Restaurant" value="1" />
                    <el-option label="Order No." value="2" />
                    <el-option label="Tel" value="3" />
                  </el-select>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="8">
            <el-form-item label="数量：">
              <el-input v-model="form.publicName" placeholder="Please input" class="input-with-select"              >
                <template #append>
                  <el-select v-model="select" placeholder="Select" style="width: 115px">
                    <el-option label="Restaurant" value="1" />
                    <el-option label="Order No." value="2" />
                    <el-option label="Tel" value="3" />
                  </el-select>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="8">
            <el-form-item label="货物编号：">
              <el-input v-model="form.publicName" placeholder="请输入托运联系人姓名" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="8">
            <el-form-item label="规格型号：">
              <el-input v-model="form.publicName" placeholder="请输入托运联系人姓名" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="8">
            <el-form-item label="加入常用货物：">
              <el-input v-model="form.publicName" placeholder="请输入托运联系人姓名" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="8">
            <el-form-item label="">
              <el-button type="danger" size="small" plain @click="deleteGoods(index)" v-if="goods.list.length > 1">删除</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        </el-col>
        <el-col :xs="24">
          <el-form-item label="">
          <el-button size="small" type="primary" plain @click="addGoods">添加货物</el-button>
          <el-button size="small" type="primary" plain @click="selectGoods">常用货物</el-button>
          </el-form-item>
        </el-col>
        <el-col :xs="24">
          <el-divider />
          其他要求
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8">
          <el-form-item label="运输发票：">
            <el-radio-group v-model="form.status" placeholder="请选择">
              <el-radio v-for="(item,index) in optionData.statusType" :key="index" :label="item.id">{{item.name}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8">
          <el-form-item label="回单要求：">
            <el-input v-model="form.publicName" placeholder="请输入托运联系人姓名" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8">
          <el-form-item label="载具要求：">
            <el-input v-model="form.publicName" placeholder="请输入托运联系人姓名" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8">
          <el-form-item label="货值申明：">
            <el-input v-model="form.publicName" placeholder="请输入托运联系人姓名" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8">
          <el-form-item label="合理损耗：">
            <el-input v-model="form.publicName" placeholder="请输入损耗值" >
                <template #append>
                  <el-select v-model="select" placeholder="Select" style="width: 115px">
                    <el-option label="‰（千分之几）" value="1" />
                    <el-option label="固定值" value="2" />
                  </el-select>
                </template>
              </el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8">
          <el-form-item label="结算重量：">
            <el-radio-group v-model="form.status" placeholder="请选择">
              <el-radio v-for="(item,index) in optionData.statusType" :key="index" :label="item.id">{{item.name}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :xs="24">
          <el-divider />
          <el-form-item label="订单金额：">
            <el-radio-group v-model="form.status" placeholder="请选择">
              <el-radio v-for="(item,index) in optionData.statusType" :key="index" :label="item.id">{{item.name}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :xs="24">
          <el-form-item label="紧急程度：">
            <el-select v-model="form.systemFlag" placeholder="请选择" clearable style="width:100%">
              <el-option v-for="(item,index) in optionData.dictType" :key="index" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24">
          <el-divider />
          <el-form-item label="备注：">
            <el-input v-model="form.publicName" placeholder="请输入备注信息" />
          </el-form-item>
        </el-col> 
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" :loading="btnLoading" @click="toSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {ElMessage, ElMessageBox} from 'element-plus'
import { ref, reactive, getCurrentInstance, nextTick } from 'vue';
import { useAddEdit } from '/@/assets/compositionFn/addEdit';
const obj = {
  api: '/api/admin/param',
  initForm:{
    id: null,
    publicName: null,
    publicKey: null,
    publicValue: null,
    status: '0',
    systemFlag: null,
    isAddPhone: false,
  },
};
let {isShow, btnLoading, handle, optionData, form, init, returnInfo, handleClose, submitForm} = useAddEdit(obj);
const emit = defineEmits(['confirm']);
const {proxy} :any = getCurrentInstance();
const prop = defineProps({
  name: {
    type: String,
  }
});
watch(isShow,(newVal, oldVal) => {
  if(newVal){
    //弹窗后的其他操作
    let info = returnInfo();
  }
});
let goods = reactive({
  defaultObj:{

  },
  list:[
    {id:1}
  ],
});
const addGoods = () => {
  goods.list.push({id:2})
}
const deleteGoods = (index) => {
  goods.list.split(index,1);
}

const verifyForm = ()=>{
  if(!proxy.$verify.null(form.publicName, '请填写名称')){
    return false;
  }
  if(!proxy.$verify.null(form.publicKey, '请填写键')){
    return false;
  }
  if(!proxy.$verify.null(form.publicValue, '请填写值')){
    return false;
  }
  if(!proxy.$verify.null(form.systemFlag, '请选择类型')){
    return false;
  }
  return true;
};
const toSubmit = ()=>{
  if(!verifyForm()){
    return;
  }
  submitForm().then(res => {
    emit('confirm');
  });
  
}
defineExpose({
  init,
})
</script>

<style>

</style>